import './dialogInfo.scss';
import React from 'react';

interface DialogInfoProps extends LogisticsInfo {}

export default class DialogInfo extends React.PureComponent<DialogInfoProps> {
    constructor (props: DialogInfoProps) {
        super(props);
    }

    shouldComponentUpdate (nextProps: Readonly<DialogInfoProps>): boolean {
        const keys = Reflect.ownKeys(nextProps);
        for (const key of keys) {
            if (nextProps[key] !== this.props[key]) {
                return true;
            }
        }
        return false;
    }

    render () {
        const { sid, logisticsCompany: company, logisticsInfo: infoList } = this.props;

        return (<div className="dialog-info">
            <div className="info-item">
                <div className="label">物流公司：</div>
                <div className="item-context">{company}</div>
            </div>
            <div className="info-item">
                <div className="label">物流单号：</div>
                <div className="item-context">{sid}</div>
            </div>
            <div className="info-item-list">
                <div className="label">物流动态：</div>
                <div className="item-context-list">
                    {infoList.reverse()
                        .map((val: LogInfo, id: number) => {
                            return (<div className="list-item" key={`logisticsInfo${id}`}>
                                <div className={`${id === 0 ? 'actived' : ''} time`}>{val.statusTime}</div>
                                <div className={`${id === 0 ? 'actived' : ''} info`}>{val.statusDesc}</div>
                                {id === 0 ? <div className="refresh"></div> : ''}
                            </div>);
                        })}
                </div>
            </div>
        </div>);
    }
}
